<template>
  <div class="div" ref="div">
    
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'
import {getshua} from '../../request/index'
const option=reactive({
  legend: {
    icon: 'circle',
    textStyle: {
      color: 'white'
    }
  },
  tooltip: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  dataset: {
    dimensions: [],
    source: []
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  color: [],
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series:[]
})
const div=ref()
let myChart 
onMounted(()=>{
    getshua().then(res=>{
       myChart=echarts.init(div.value)
      console.log('人员流动',res.data.data.result[0]);
      let tempData=option.legend.data=res.data.data.result[0].dimensions.slice(1)
      option.xAxis.data=res.data.data.result[0].source.map(item=>item.product)
      let colorArr=[
        [
          {offset:0,color:'#3432ff'},
          {offset:0.5,color:'#711cff'},
          {offset:1,color:'#bd01ff'}
        ],
         [
          {offset:0,color:'#3ee293'},
          {offset:0.5,color:'#1cb947'},
          {offset:1,color:'#039c11'}
        ],
      ]
      tempData=tempData.map((item,index)=>{
        return {
          name:item,
          color:colorArr[index]
        }
      })
      option.series=tempData.map((item,index)=>{
        return {
          name:item.name,
          type:'bar',
           barWidth: '15px',
          data:res.data.data.result[0].source.map(arr=>arr[item.name]),
          itemStyle:{
            borderRadius:[20,20,20,20],
            color:new echarts.graphic.LinearGradient(0,0,0,1,item.color)
          }
        }
      })




       myChart.setOption(option)
    })
   
   


})

  window.addEventListener('resize', function() {
    myChart.resize();
  });

</script>

<style scoped>
.div{
   
    height:76%;
}
</style>




